<!DOCTYPE html>
<html>
<head lang="en">
	<base href="/">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta charset="UTF-8">
	<title>我的</title>
	<link href="css/base.css" type="text/css" rel="stylesheet">
	<link href="css/address.css" type="text/css" rel="stylesheet">
	<!--[if lt IE 9]>
	<script src="js/html5shiv.js"></script>
	<script src="js/respond.js"></script>
	<![endif]-->
</head>
<body>
<div class="my">
	<header>
		<a class="fl" href="#"><i class="iconfont">&#xe624;</i></a>
		<h2>管理收货地址</h2>
		<a href="#"><i class="iconfont">&#xe62b;</i></a>
	</header>
	<div class="address" id="addressList">
		<!-- 地址列表将通过 JavaScript 动态生成 -->
	</div>
</div>

<!--编辑弹框-->
<!--遮罩-->
<div class="mask"></div>
<div class="readd">
	<form id="editAddressForm" method="post">
		<label for="editContactName">联系人姓名：</label>
		<input type="text" id="editContactName" class="on" placeholder="请输入联系人姓名" />
		<br><br>

		<label for="editTel">手机号码：</label>
		<input type="text" id="editTel" placeholder="请输入手机号码" />
		<br><br>

		<label for="editProvince">省份：</label>
		<select id="editProvince">
			<option value="">请选择省份</option>
		</select>
		<input type="hidden" id="editProvincecode" name="provincecode">
		<br><br>

		<label for="editCity">城市：</label>
		<select id="editCity">
			<option value="">请选择城市</option>
		</select>
		<input type="hidden" id="editCitycode" name="citycode">
		<br><br>

		<label for="editArea">区域：</label>
		<select id="editArea">
			<option value="">请选择区域</option>
		</select>
		<input type="hidden" id="editAreacode" name="areacode">
		<br><br>

		<label for="editDetailAddress">详细地址：</label>
		<textarea id="editDetailAddress" placeholder="请输入详细地址"></textarea>
		<br><br>

		<div class="bc">
			<input type="button" id="saveEdit" value="保存" />
			<input type="button" id="cancelEdit" value="取消" />
		</div>
	</form>
</div>
<!--删除的弹框-->
<div class="delmask">
	<div class="deltk">
		<p>确认删除地址？</p>
		<p>删除之后将无法恢复</p>
		<p>
			<a class="dqx" href="#" id="cancelDelete">取消</a>
			<a class="dqr" href="#" id="confirmDelete">确认</a>
		</p>
	</div>
</div>

<div style="padding-top: 4rem;"></div>
<!--------------------------footer----------------------->
<footer>
	<a href="index.html" class="on"><i class="iconfont">&#xe60d;</i><br /><span>首页</span></a>
	<a href="#"><i class="iconfont">&#xe6f4;</i><br /><span>分类</span></a>
	<a href="#"><i class="iconfont">&#xe601;</i><br /><span>搭配</span></a>
	<a href="#"><i class="iconfont">&#xe6cc;</i><br /><span>购物车</span></a>
	<a href="#"><i class="iconfont">&#xe607;</i><br /><span>我</span></a>
</footer>

<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/public.js"></script>
<script src="js/rem.js" type="text/javascript" charset="utf-8"></script>

<script>
	$(document).ready(function() {
		// 从服务器获取地址信息
		function loadAddresses() {
			$.ajax({
				url: 'orderaddress/getaddressbyuserid', // 获取地址信息的路径
				method: 'GET',
				success: function(data) {
					var addressList = $('#addressList');
					addressList.empty(); // 清空现有的地址列表
					console.log(data);
					// 遍历地址数据并生成HTML

					if (Array.isArray(data.data)) {

						data.data.forEach(function (address) {
							var addressHtml = `
                        <div class="address-item">
                            <p>${address.name} - ${address.tel}</p>
                            <p>${address.province} ${address.city} ${address.area}</p>
                            <p>${address.address}</p>

                        </div>
                    `;
							addressList.append(addressHtml);
						});
					}else {
						console.log("不是数组");
					}
				},

				error: function() {
					alert('无法加载地址信息，请稍后重试。');
				}
			});
		}

		// 页面加载时加载地址信息
		loadAddresses();

		// 编辑地址按钮点击事件
		$(document).on('click', '.edit-btn', function() {
			var addressId = $(this).data('id');
			// 这里可以打开编辑弹框并填充地址信息
			// 你需要根据 addressId 获取地址的详细信息并填充到表单中
		});

		// 删除地址按钮点击事件
		$(document).on('click', '.delete-btn', function() {
			var addressId = $(this).data('id');
			if (confirm('确认删除该地址吗？')) {
				$.ajax({
					url: 'orderaddress/delete/' + addressId, // 删除地址的路径
					method: 'DELETE',
					success: function() {
						loadAddresses(); // 删除成功后重新加载地址列表
					},
					error: function() {
						alert('删除地址失败，请稍后重试。');
					}
				});
			}
		});
	});
</script>

</body>
</html>